<template>
  <div>
    <div style="margin: 10px 0;">
      <el-popconfirm
          style="margin-left: 5px"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
      <el-input placeholder="请输入名称查询" v-model="name" clearable style="width: 200px;margin-left: 10px"></el-input>
      <el-input placeholder="请输入订单号进行查询" v-model="no" clearable style="width: 200px;margin-left: 10px"></el-input>
      <el-input placeholder="请输入手机尾号后四位进行查询" v-model="phone" clearable style="width: 200px;margin-left: 10px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="search">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="reset">重置</el-button>
      <el-button type="primary" icon="el-icon-bottom" style="margin-left: 5px" @click="exportByIds">生成发货表</el-button>
    </div>


    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"
              :default-sort = "{prop: 'no', order: 'descending'}"
              :header-cell-style="{background:'#e7e8ef',color:'#4f5257'}"
              stripe fixed border>
      <el-table-column
          prop="id"
          type="selection"
          width="40"></el-table-column>
      <el-table-column prop="no" sortable label="订单编号" width="120"></el-table-column>
       <el-table-column prop="sumPrice" label="总价格" width="80"></el-table-column>
      <el-table-column prop="name" label="订单名称" width="140"></el-table-column>

      <el-table-column prop="status" label="支付状态" width="100"
                       :filters="[{ text: '已支付', value: '已支付' }, { text: '未支付', value: '未支付' }]"
                       :filter-method="filterTag"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '已支付' ? 'success' : 'warning'"
              disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" sortable label="下单时间" width="100"></el-table-column>
<!--      <el-table-column prop="payTime"  label="支付时间" width="100"></el-table-column>-->
      <el-table-column label="用户姓名" width="100">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.nickName }}</p>
            <p>账号: {{ scope.row.userName }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.nickName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
<!--      <el-table-column prop="userName" label="用户账号" width="100"></el-table-column>-->
      <el-table-column label="购买商品" width="100">
        <template v-slot="scope">
          <el-button type="success" @click="viewGoods(scope.row.id)" >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="card" label="身份证号"  width="150"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="100"></el-table-column>
      <el-table-column prop="address" label="收货地址" width="140"></el-table-column>
      <el-table-column prop="deliverGoods" label="审核状态" width="100"
                       :filters="[{ text: '已审核', value: '已审核' }, { text: '未审核', value: '未审核' },{text: '不通过',value: '不通过'}]"
                       :filter-method="filterDeliverGoods"
                       fixed="right"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.deliverGoods === '已审核' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.deliverGoods}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
          <el-button style="margin-left: 2px" type="success" size="mini" @click="updateById(scope.row)">编辑</el-button>
          <el-button style="margin-left: 2px" type="warning" size="mini" @click="devGoods(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="审核操作" :visible.sync="dialogVisibleDev" width="20%" style="text-align: center" center :before-close="handleClose">
      <div style="display:flex;">
        <el-select v-model="devValue" placeholder="请选择" style="width: 70%;">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button type="success" style="margin-left: 10px" @click="devGoodsTo">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="商品信息" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-table :data="buyGoodsTable"  style="width: 100%"
                :header-cell-style="{background:'#e7e8ef',color:'#4f5257'}"
                stripe fixed border>
        <el-table-column prop="name" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="img" label="商品图片" width="120">
          <template slot-scope="scope">
            <div>
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.img"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="购买商品数量">
        </el-table-column>
        <el-table-column prop="unit" label="商品单位" width="120">
        </el-table-column>
        <el-table-column prop="price" label="商品总价（元）" width="120">
          <template slot-scope="scope">
            <span style="color: orangered">￥{{ (scope.row.price * scope.row.num).toFixed(2) }}</span>
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>

    <el-dialog
        title="订单信息"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="订单号">
          <el-input v-model="form.no" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="收获联系人">
          <el-input v-model="form.card"></el-input>
        </el-form-item>
        <el-form-item label="收获地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
             <el-button type="primary" @click="save">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script lang="js">

import {serverIp} from "../../../public/config";

export default {
  name: "Order",
  data(){
    return{
      tableData:[],
      buyGoodsTable: [],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisibleDev:false,
      name: '',
      no: '',
      phone: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {},
      devValue:'未审核',
      options: [{
        value: '已审核',
        label: '通过'
      }, {
        value: '不通过',
        label: '拒绝'
      }],
      value: ''
    }
  },
  created() {
    this.load()
  },
  methods:{
    //导出已经审核的数据
    exportByIds(){
      window.open(`http://${serverIp}:8081/orders/export/ByIds`)
      this.load()
    },
    // 审核
    devGoods(row){
      this.form={}
      this.dialogVisibleDev=true
      this.form.id=row.id
    },
    devGoodsTo(){
      this.form.deliverGoods = this.devValue
      console.log(this.form)
      this.request.post("/orders/devGoods",this.form).then(res =>{
       if(res.code===200){
         this.dialogVisibleDev=false
         this.load()
       }else {
         this.$message.error(res.message)
       }
      })
    },
    //筛选状态
    filterTag(value, row) {
      return row.status === value;
    },
    filterDeliverGoods(value, row){
      return row.deliverGoods === value;
    },
    //查看购买的商品
    viewGoods(orderId){
      this.request.get("/orders/getGoodsById/"+orderId).then(res =>{
        this.buyGoodsTable=res.data
        this.dialogVisible =true
      })
    },
    updateById(row){
      this.form=row
      this.dialogVisible2=true
    },
    save(){
      this.request.post("/orders",this.form).then(res =>{
        if (res.code === 200){
          this.$message.success("保存成功")
          this.dialogVisible2=false
        }else {
          this.$message.error(res.message)
        }
      })
    },
    reset(){
      this.name="";
      this.no="";
      this.phone="";
      this.load()
      this.$message({
        message: '重置成功',
        type: 'success'
      });
    },
    search(){
      if (this.name!=''||this.no!=''||this.phone!=''){
        this.load()
        this.$message({
          message: '查询成功',
          type: 'success'
        });
      }else{
        this.$message({
          message: '请输入查询内容',
          type: 'warning'
        });
      }
    },
    load(){
      this.request.get("/orders/page",{
            params:{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              name:this.name,
              no:this.no,
              phone:this.phone,
            }
          }
      ).then(res =>{
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleDelete(index, row) {
      this.request.delete("/orders/"+(index,row).id).then(res=>{
        if (res.code ===200){
          this.load()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v =>v.id)
      if (ids.length!=0){
        this.$confirm('你正在进行批量删除操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request.post("/orders/del/batch/", ids).then(res => {
            if (res.code ===200){
              this.load()
              this.$message({
                type: 'success',
                message: '批量删除成功!'
              });
            }else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message.warning("请选择删除记录")
      }
    },
    /**
     * 选择框
     * */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i=1; i<=val; i++)
        console.log(this.multipleSelection[i])
    },
    /**
     * 自定义操作列
     * @param index
     * @param row
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.load()
    },
  }
}
</script>

<style scoped>

</style>